<!-- 头部面包屑导航 -->
<page-header [action]="phActionTpl">
  <ng-template #phActionTpl></ng-template>
</page-header>
<nz-card>
  <div nz-row [nzGutter]="24">
    <!--左边 card -->
    <div nz-col nzMd="24" nzLg="12">
      <nz-card>
        <!-- 添加一级 -->
        <div nz-row [nzGutter]="24" style="margin-bottom: 10px;">
          <div nz-col nzMd="24" nzLg="24">
            <!-- acl [acl-ability]="'base-archives-project-approval:add'" 需添加响应 限才 能看到按钮 -->
            <button (click)="add()" nz-button acl [acl-ability]="'base-archives-project-approval:add'" nzType="primary">
              {{ 'button.leve.one' | translate }}
            </button>
          </div>
        </div>
        <!-- 搜索框 -->
        <div nz-row [nzGutter]="24">
          <div nz-col nzMd="24" nzLg="24">
            <nz-input-group [nzSuffix]="suffixIcon" style="width:100%">
              <input type="text" nz-input placeholder="{{ 'placeholder' | translate }}" [(ngModel)]="searchValue" />
            </nz-input-group>
            <ng-template #suffixIcon>
              <i nz-icon type="search"></i>
            </ng-template>
          </div>
        </div>
        <!-- tree -->
        <div nz-row [nzGutter]="24">
          <div nz-col nzMd="24" nzLg="24">
            <nz-tree
              [nzData]="nodes"
              [nzSearchValue]="searchValue"
              (nzClick)="treeClick($event)"
              (nzDblClick)="openFolder($event)"
            >
              <!-- 数据渲染树 -->
              <ng-template #nzTreeTemplate let-node>
                <span class="custom-node">
                  <span *ngIf="!node.isLeaf" (contextmenu)="contextMenu(node.key, $event, contextTemplate)">
                    <span class="folder-name">{{ node.title }}</span>
                  </span>
                  <span *ngIf="node.isLeaf" (contextmenu)="contextMenu(node.key, $event, contextTemplate)">
                    <span class="file-name">{{ node.title }}</span>
                  </span>
                </span>
              </ng-template>
              <!-- 树 右击下拉框 -->
              <ng-template #contextTemplate>
                <ul nz-menu nzInDropDown>
                  <li nz-menu-item (click)="addChild()" acl [acl-ability]="'sales-status:add'">
                    {{ 'button.add' | translate }}
                  </li>
                  <li nz-menu-item (click)="delete()" acl [acl-ability]="'sales-status:delete'">
                    {{ 'table.delete' | translate }}
                  </li>
                  <li nz-menu-item (click)="cancel()">{{ 'button.cancel' | translate }}</li>
                </ul>
              </ng-template>
            </nz-tree>
          </div>
        </div>
      </nz-card>
    </div>

    <!--右边card-->
    <div nz-col nzMd="24" nzLg="12">
      <nz-card>
        <!-- form -->
        <form nz-form [formGroup]="validateForm" (ngSubmit)="submitForm()">
          <!-- 销售编码 -->
          <nz-form-item>
            <nz-form-label nzRequired [nzSm]="8" [nzXs]="24">{{ 'sales.code' | translate }}</nz-form-label>
            <nz-form-control [nzSm]="14" [nzXs]="24">
              <input
                formControlName="code"
                id="code"
                [(ngModel)]="baseSalesStatus.code"
                name="code"
                nz-input
                placeholder="{{ 'aoto.create' | translate }}"/>
            </nz-form-control>
          </nz-form-item>

          <!-- 销售名称 -->
          <nz-form-item>
            <nz-form-label nzRequired [nzSm]="8" [nzXs]="24">{{ 'sales.name' | translate }}</nz-form-label>
            <nz-form-control [nzSm]="14" [nzXs]="24">
              <input
                formControlName="name"
                id="name"
                [(ngModel)]="baseSalesStatus.name"
                name="name"
                nz-input
                placeholder="{{ 'placeholder' | translate }}{{ 'sales.name' | translate }}"
                maxlength="20"/>
              <nz-form-explain *ngIf="validateForm.get('name')?.dirty && validateForm.get('name')?.errors">
                {{ 'placeholder' | translate }}{{ 'sales.name' | translate }}
              </nz-form-explain>
            </nz-form-control>
          </nz-form-item>

          <!-- 是否启用 -->
          <nz-form-item>
            <nz-form-label nzRequired [nzSm]="8" [nzXs]="24">{{ 'is.status' | translate }} </nz-form-label>
            <nz-form-control [nzSm]="14" [nzXs]="24">
              <nz-switch
                [ngModelOptions]="{ standalone: true }"
                [(ngModel)]="status"
                name="status"
                nzCheckedChildren="{{ 'yes' | translate }}"
                nzUnCheckedChildren="{{ 'no' | translate }}">
              </nz-switch>
            </nz-form-control>
          </nz-form-item>

          <!-- 序号 -->
          <nz-form-item>
            <nz-form-label nzRequired [nzSm]="8" [nzXs]="24">{{ 'milestone.serial.number' | translate }}</nz-form-label>
            <nz-form-control [nzSm]="14" [nzXs]="24">
              <input
                formControlName="sort"
                id="sort"
                [(ngModel)]="baseSalesStatus.sort"
                name="sort"
                nz-input
                placeholder="{{ 'placeholder' | translate }}{{ 'milestone.serial.number' | translate }}"/>
              <nz-form-explain *ngIf="validateForm.get('sort')?.dirty && validateForm.get('sort')?.errors">
                {{ 'placeholder' | translate }}{{ 'quotation.merchants' | translate
                }}{{ 'milestone.serial.number' | translate }}
              </nz-form-explain>
            </nz-form-control>
          </nz-form-item>

          <!-- 保存 重置 -->
          <nz-form-item>
            <nz-form-label [nzSm]="8" [nzXs]="24" [nzNoColon]="true"> </nz-form-label>
            <nz-form-control [nzSm]="14" [nzXs]="24">
              <button nzType="primary" (click)="reset()" nz-button>
                <span>{{ 'button.reset' | translate }}</span>
              </button>
              <button nz-button nzType="primary">{{ 'store.save' | translate }}</button>
            </nz-form-control>
          </nz-form-item>
        </form>
      </nz-card>
    </div>
  </div>
</nz-card>
